<!DOCTYPE html>
<title>Test "video" as a source for "canvas".</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<video></video>
<canvas width="160" height="120"></canvas>
<script>
async_test(function(t) {
    var ctx;
    var width;
    var height;
    var results = {
        current: 0,
        values: [
            // Different platforms may take different RGB conversion paths or
            // have slight rounding differences, so allow multiple values here.
            { time: 0, r: [255], g: [255], b: [0] },
            { time: 2, r: [0], g: [3], b: [240, 242, 243]  },
            { time: 4, r: [0], g: [31], b: [213, 215, 216] },
            { time: 6, r: [0], g: [48], b: [182, 183, 184, 185] },
            { time: 8, r: [0], g: [75, 76], b: [153, 154, 155] },
            { time: 10, r: [0], g: [96, 97], b: [126, 127, 128] }
        ]
    };

    var video = document.querySelector("video");

    video.onloadedmetadata = t.step_func(function() {
        width = video.videoWidth / 2;
        height = video.videoHeight / 2;

        ctx = document.querySelector("canvas").getContext("2d");
        ctx.fillStyle = "yellow";
        ctx.fillRect(0, 0, width, height);
        testFrame();
    });

    video.onseeked = t.step_func(function() {
        ctx.drawImage(video, 0, 0, width, height);
        testFrame();
    });

    function testFrame() {
        var expected = results.values[results.current];
        var frame = ctx.getImageData(0, 0, width, height);
        var r = frame.data[4 * 2 * width + 16 + 0];
        var g = frame.data[4 * 2 * width + 16 + 1];
        var b = frame.data[4 * 2 * width + 16 + 2];

        assert_true(expected.r.includes(r), expected.time + " r " + r);
        assert_true(expected.g.includes(g), expected.time + " g " + g);
        assert_true(expected.b.includes(b), expected.time + " b " + b);

        if (++results.current == results.values.length)
            t.done();
        else
            video.currentTime = results.values[results.current].time;
    }

    video.src = "content/counting.webm";
});
</script>
